<template>
  <!--折线图-->
  <div
    :style="{width:width,height:height}"
  ></div>
</template>

<script>
  export default {
    name: 'FourBarChart',
    props: {
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      colors: {
        type: String,
        default: 'rgba(4, 203, 250'
      },
      /**
       * @param:
       *    dataLine  --> 折线的数据
       *    dataY  --> Y轴的数据
       * @date 2020/08/23
       * @author ZhuHongWei
       */
      chartData: {
        type: Object,
        default: () => ({
          valueList: [],
          dataList: [],
          bgList: []
        })
      },
      barColor: {
        type: String,
        default: '#58A3F7'
      },
      title: {
        type: String,
        default: ''
      },
      dataList: {
        type: Array,
        default: ()=>[]
      },
      valueList: {
        type: Array,
        default: ()=>[]
      },
      bgList: {
        type: Array,
        default: ()=>[]
      }
    },
    data() {
      return {
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler: function() {
          this.initChart()
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    methods: {
      initChart() {
        let that = this
        this.chart = this.$echarts.init(this.$el)
        this.chart.clear()
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '4%',
            right: '2%',
            bottom: '6%',
            top: '20%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: ['路由器', '枪式摄像机', '球式摄像机', '门架', '情报板'],
            axisLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.12)'
              }
            },
            axisLabel: {
              margin: 10,
              color: '#e2e9ff',
              textStyle: {
                fontSize: 14
              },
            },
          }],
          yAxis: [{
            axisLabel: {
              formatter: '{value}',
              color: '#e2e9ff',
            },
            axisLine: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.12)'
              }
            }
          }],
          series: [{
            type: 'bar',
            data: [300, 450, 770, 203, 255,],
            barWidth: '24px',
            itemStyle: {
              normal: {
                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(255,0,0,0.9)' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: 'rgba(255,153,153,0.7)' // 100% 处的颜色
                }], false),
                barBorderRadius: [30, 30, 0, 0],
                shadowColor: 'rgba(255,153,153,.2)',
                shadowBlur: 4,
              }
            },
            label: {
              normal: {
                show: true,
                lineHeight: 20,
                width: 80,
                height: 20,
                backgroundColor: 'rgba(0,160,221,0.1)',
                borderRadius: 200,
                position: ['-8', '-40'],
                distance: 1,
                formatter: [
                  '    {d|●}',
                  ' {a|{c}}     \n',
                  '    {b|}'
                ].join(','),
                rich: {
                  d: {
                    color: '#3CDDCF',
                  },
                  a: {
                    color: '#fff',
                    align: 'center',
                  },
                  b: {
                    width: 1,
                    height: 14,
                    borderWidth: 1,
                    borderColor: '#234e6c',
                    align: 'left'
                  },
                }
              }
            }
          }]
        }
        this.chart.setOption(option)
      }
    }
  }
</script>

<style scoped>
</style>
